રિએક્ટ શેડ્યૂલર પ્રોફાઇલિંગ: શ્રેષ્ઠ પ્રદર્શન માટે ટાસ્ક એક્ઝેક્યુશનનું અનાવરણ

આધુનિક વેબ ડેવલપમેન્ટની દુનિયામાં, એક સરળ અને રિસ્પોન્સિવ યુઝર અનુભવ પ્રદાન કરવો સર્વોપરી છે. રિએક્ટ, તેના કમ્પોનન્ટ-આધારિત આર્કિટેક્ચર અને વર્ચ્યુઅલ DOM સાથે, જટિલ UI બનાવવા માટે એક મુખ્ય આધારસ્તંભ બની ગયું છે. જોકે, રિએક્ટના ઓપ્ટિમાઇઝેશન છતાં, પ્રદર્શનની સમસ્યાઓ ઊભી થઈ શકે છે, ખાસ કરીને મોટી અને જટિલ એપ્લિકેશન્સમાં. રિએક્ટ કેવી રીતે કાર્યોનું શેડ્યૂલિંગ અને એક્ઝેક્યુશન કરે છે તે સમજવું આ પ્રદર્શન સમસ્યાઓને ઓળખવા અને ઉકેલવા માટે નિર્ણાયક છે. આ લેખ રિએક્ટ શેડ્યૂલર પ્રોફાઇલિંગની દુનિયામાં ઊંડાણપૂર્વક જાય છે, જે ટાસ્ક એક્ઝેક્યુશનનું વિશ્લેષણ કરવા અને તમારી રિએક્ટ એપ્લિકેશન્સને શ્રેષ્ઠ પ્રદર્શન માટે ઓપ્ટિમાઇઝ કરવા માટે એક વ્યાપક માર્ગદર્શિકા પૂરી પાડે છે.

રિએક્ટ શેડ્યૂલરને સમજવું

પ્રોફાઇલિંગ તકનીકોમાં ઊંડા ઉતરતા પહેલાં, ચાલો રિએક્ટ શેડ્યૂલરની મૂળભૂત સમજ સ્થાપિત કરીએ. રિએક્ટ શેડ્યૂલર એ રિએક્ટ એપ્લિકેશનમાં કાર્યના એક્ઝેક્યુશનનું સંચાલન કરવા માટે જવાબદાર છે. તે કાર્યોને પ્રાથમિકતા આપે છે, તેમને કામના નાના એકમોમાં વિભાજીત કરે છે, અને તેમને એવી રીતે એક્ઝેક્યુટ કરવા માટે શેડ્યૂલ કરે છે કે જે મુખ્ય થ્રેડને બ્લોક કરવાનું ઓછું કરે. આ શેડ્યૂલિંગ એક રિસ્પોન્સિવ યુઝર ઇન્ટરફેસ જાળવવા માટે નિર્ણાયક છે.

રિએક્ટ ફાઇબર આર્કિટેક્ચરનો ઉપયોગ કરે છે, જે તેને રેન્ડરિંગને નાના, વિક્ષેપિત કરી શકાય તેવા કાર્યના એકમોમાં વિભાજીત કરવાની મંજૂરી આપે છે. આ એકમોને ફાઇબર્સ કહેવામાં આવે છે, અને રિએક્ટ શેડ્યૂલર આ ફાઇબર્સનું સંચાલન કરે છે જેથી ઉચ્ચ-પ્રાથમિકતાવાળા કાર્યો (જેમ કે યુઝર ઇનપુટ) ને તાત્કાલિક હેન્ડલ કરવામાં આવે. શેડ્યૂલર ફાઇબર્સનું સંચાલન કરવા માટે પ્રાથમિકતા કતારનો ઉપયોગ કરે છે, જે તેને તેમની તાકીદના આધારે અપડેટ્સને પ્રાથમિકતા આપવાની મંજૂરી આપે છે.

મુખ્ય ખ્યાલો:

• ફાઇબર: એક કમ્પોનન્ટ ઇન્સ્ટન્સનું પ્રતિનિધિત્વ કરતું કાર્યનું એકમ.
• શેડ્યૂલર: ફાઇબર્સને પ્રાથમિકતા આપવા અને શેડ્યૂલ કરવા માટે જવાબદાર મોડ્યુલ.
• વર્ક લૂપ: ફંક્શન જે ફાઇબર ટ્રી દ્વારા પુનરાવર્તન કરે છે અને અપડેટ્સ કરે છે.
• પ્રાથમિકતા કતાર: ફાઇબર્સને તેમની પ્રાથમિકતાના આધારે સંચાલિત કરવા માટે વપરાતી ડેટા સ્ટ્રક્ચર.

પ્રોફાઇલિંગનું મહત્વ

પ્રોફાઇલિંગ એ તમારી એપ્લિકેશનની પ્રદર્શન લાક્ષણિકતાઓનું માપન અને વિશ્લેષણ કરવાની પ્રક્રિયા છે. રિએક્ટના સંદર્ભમાં, પ્રોફાઇલિંગ તમને એ સમજવાની મંજૂરી આપે છે કે રિએક્ટ શેડ્યૂલર કેવી રીતે કાર્યોનું એક્ઝેક્યુશન કરી રહ્યું છે, લાંબા સમય સુધી ચાલતી કામગીરીઓને ઓળખવા, અને તે ક્ષેત્રોને નિર્ધારિત કરવા જ્યાં ઓપ્ટિમાઇઝેશનની સૌથી વધુ અસર થઈ શકે છે. પ્રોફાઇલિંગ વિના, તમે અનિવાર્યપણે અંધારામાં તીર ચલાવી રહ્યા છો, પ્રદર્શન સુધારવા માટે અનુમાન પર આધાર રાખી રહ્યા છો.

એક એવી પરિસ્થિતિનો વિચાર કરો જ્યાં જ્યારે કોઈ વપરાશકર્તા કોઈ ચોક્કસ કમ્પોનન્ટ સાથે ક્રિયાપ્રતિક્રિયા કરે છે ત્યારે તમારી એપ્લિકેશનમાં નોંધપાત્ર લેગ અનુભવાય છે. પ્રોફાઇલિંગ એ જાહેર કરી શકે છે કે શું લેગ તે કમ્પોનન્ટની અંદરની જટિલ રેન્ડરિંગ કામગીરી, બિનકાર્યક્ષમ ડેટા ફેચિંગ પ્રક્રિયા, અથવા સ્ટેટ અપડેટ્સ દ્વારા ટ્રિગર થયેલ અતિશય રી-રેન્ડર્સને કારણે છે. મૂળ કારણ ઓળખીને, તમે તમારા ઓપ્ટિમાઇઝેશન પ્રયત્નોને તે ક્ષેત્રો પર કેન્દ્રિત કરી શકો છો જે સૌથી વધુ પ્રદર્શન લાભ આપશે.

રિએક્ટ શેડ્યૂલર પ્રોફાઇલિંગ માટેના ટૂલ્સ

રિએક્ટ એપ્લિકેશન્સને પ્રોફાઇલ કરવા અને રિએક્ટ શેડ્યૂલરની અંદર ટાસ્ક એક્ઝેક્યુશન વિશેની જાણકારી મેળવવા માટે ઘણા શક્તિશાળી સાધનો ઉપલબ્ધ છે:

૧. ક્રોમ ડેવટૂલ્સ પર્ફોર્મન્સ ટેબ

ક્રોમ ડેવટૂલ્સ પર્ફોર્મન્સ ટેબ એ વેબ એપ્લિકેશન્સના વિવિધ પાસાઓને પ્રોફાઇલ કરવા માટેનું એક બહુમુખી સાધન છે, જેમાં રિએક્ટ પ્રદર્શનનો સમાવેશ થાય છે. તે બ્રાઉઝરમાં થતી તમામ પ્રવૃત્તિઓની વિગતવાર સમયરેખા પૂરી પાડે છે, જેમાં જાવાસ્ક્રિપ્ટ એક્ઝેક્યુશન, રેન્ડરિંગ, પેઇન્ટિંગ અને નેટવર્ક વિનંતીઓનો સમાવેશ થાય છે. તમારી રિએક્ટ એપ્લિકેશન સાથે ક્રિયાપ્રતિક્રિયા કરતી વખતે પર્ફોર્મન્સ પ્રોફાઇલ રેકોર્ડ કરીને, તમે પ્રદર્શનની સમસ્યાઓ ઓળખી શકો છો અને રિએક્ટ કાર્યોના એક્ઝેક્યુશનનું વિશ્લેષણ કરી શકો છો.

તેનો ઉપયોગ કેવી રીતે કરવો:

1. ક્રોમ ડેવટૂલ્સ ખોલો (Ctrl+Shift+I અથવા Cmd+Option+I).
2. "Performance" ટેબ પર નેવિગેટ કરો.
3. "Record" બટન પર ક્લિક કરો.
4. તમે જે વર્તનને પ્રોફાઇલ કરવા માંગો છો તેને ટ્રિગર કરવા માટે તમારી રિએક્ટ એપ્લિકેશન સાથે ક્રિયાપ્રતિક્રિયા કરો.
5. રેકોર્ડિંગ રોકવા માટે "Stop" બટન પર ક્લિક કરો.
6. પ્રદર્શનની સમસ્યાઓ ઓળખવા માટે જનરેટ થયેલી સમયરેખાનું વિશ્લેષણ કરો.

પર્ફોર્મન્સ ટેબ કેપ્ચર કરેલા ડેટાનું વિશ્લેષણ કરવા માટે વિવિધ દ્રશ્યો પૂરા પાડે છે, જેમાં શામેલ છે:

• ફ્લેમ ચાર્ટ: જાવાસ્ક્રિપ્ટ ફંક્શન્સના કોલ સ્ટેકને વિઝ્યુઅલાઈઝ કરે છે, જે તમને સૌથી વધુ સમય લેતા ફંક્શન્સને ઓળખવાની મંજૂરી આપે છે.
• બોટમ-અપ: દરેક ફંક્શન અને તેના કોલીઝમાં વિતાવેલા સમયનો સરવાળો કરે છે, જે તમને સૌથી ખર્ચાળ કામગીરીઓને ઓળખવામાં મદદ કરે છે.
• કોલ ટ્રી: કોલ સ્ટેકને એક વંશવેલાના ફોર્મેટમાં પ્રદર્શિત કરે છે, જે એક્ઝેક્યુશન પ્રવાહનું સ્પષ્ટ દ્રશ્ય પૂરું પાડે છે.

પર્ફોર્મન્સ ટેબની અંદર, રિએક્ટ સંબંધિત એન્ટ્રીઝ શોધો, જેમ કે "Update" (કમ્પોનન્ટ અપડેટનું પ્રતિનિધિત્વ કરે છે) અથવા "Commit" (અપડેટ થયેલ DOM ના અંતિમ રેન્ડરિંગનું પ્રતિનિધિત્વ કરે છે). આ એન્ટ્રીઝ કમ્પોનન્ટ્સ રેન્ડર કરવામાં વિતાવેલા સમય વિશે મૂલ્યવાન માહિતી પૂરી પાડી શકે છે.

૨. રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલર

રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલર એ રિએક્ટ એપ્લિકેશન્સને પ્રોફાઇલ કરવા માટે ખાસ બનાવેલું એક વિશિષ્ટ સાધન છે. તે રિએક્ટની આંતરિક કામગીરીઓનું વધુ કેન્દ્રિત દ્રશ્ય પૂરું પાડે છે, જેનાથી કમ્પોનન્ટ રેન્ડરિંગ, સ્ટેટ અપડેટ્સ અને પ્રોપ ફેરફારો સંબંધિત પ્રદર્શન સમસ્યાઓને ઓળખવાનું સરળ બને છે.

ઇન્સ્ટોલેશન:

રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલર ક્રોમ, ફાયરફોક્સ અને એજ માટે બ્રાઉઝર એક્સટેન્શન તરીકે ઉપલબ્ધ છે. તમે તેને સંબંધિત બ્રાઉઝરના એક્સટેન્શન સ્ટોરમાંથી ઇન્સ્ટોલ કરી શકો છો.

ઉપયોગ:

1. તમારા બ્રાઉઝરમાં રિએક્ટ ડેવટૂલ્સ પેનલ ખોલો.
2. "Profiler" ટેબ પર નેવિગેટ કરો.
3. "Record" બટન પર ક્લિક કરો.
4. તમે જે વર્તનને પ્રોફાઇલ કરવા માંગો છો તેને ટ્રિગર કરવા માટે તમારી રિએક્ટ એપ્લિકેશન સાથે ક્રિયાપ્રતિક્રિયા કરો.
5. રેકોર્ડિંગ રોકવા માટે "Stop" બટન પર ક્લિક કરો.

પ્રોફાઇલર કેપ્ચર કરેલા ડેટાનું વિશ્લેષણ કરવા માટે બે મુખ્ય દ્રશ્યો પૂરા પાડે છે:

• ફ્લેમગ્રાફ: કમ્પોનન્ટ ટ્રીનું વિઝ્યુઅલ પ્રતિનિધિત્વ, જ્યાં દરેક બાર એક કમ્પોનન્ટનું પ્રતિનિધિત્વ કરે છે અને તેની પહોળાઈ તે કમ્પોનન્ટને રેન્ડર કરવામાં વિતાવેલો સમય દર્શાવે છે.
• રેન્ક્ડ: કમ્પોનન્ટ્સની એક યાદી જે તેમને રેન્ડર કરવામાં લાગેલા સમય મુજબ રેન્ક કરેલી હોય છે, જે તમને સૌથી ખર્ચાળ કમ્પોનન્ટ્સને ઝડપથી ઓળખવાની મંજૂરી આપે છે.

રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલર આ માટે પણ સુવિધાઓ પૂરી પાડે છે:

• અપડેટ્સને હાઇલાઇટ કરવું: રી-રેન્ડર થઈ રહેલા કમ્પોનન્ટ્સને દૃષ્ટિની રીતે હાઇલાઇટ કરવું, જે તમને બિનજરૂરી રી-રેન્ડર્સને ઓળખવામાં મદદ કરે છે.
• કમ્પોનન્ટ પ્રોપ્સ અને સ્ટેટનું નિરીક્ષણ કરવું: કમ્પોનન્ટ્સના પ્રોપ્સ અને સ્ટેટની તપાસ કરવી જેથી તેઓ શા માટે રી-રેન્ડર થઈ રહ્યા છે તે સમજી શકાય.
• કમ્પોનન્ટ્સને ફિલ્ટર કરવું: ચોક્કસ કમ્પોનન્ટ્સ અથવા કમ્પોનન્ટ ટ્રીના ભાગો પર ધ્યાન કેન્દ્રિત કરવું.

૩. React.Profiler કમ્પોનન્ટ

React.Profiler કમ્પોનન્ટ એ એક બિલ્ટ-ઇન રિએક્ટ API છે જે તમને તમારી એપ્લિકેશનના ચોક્કસ ભાગોના રેન્ડરિંગ પ્રદર્શનને માપવાની મંજૂરી આપે છે. તે બાહ્ય સાધનો પર આધાર રાખ્યા વિના પ્રોફાઇલિંગ ડેટા એકત્રિત કરવાનો પ્રોગ્રામેટિક માર્ગ પૂરો પાડે છે.

ઉપયોગ:

તમે જે કમ્પોનન્ટ્સને પ્રોફાઇલ કરવા માંગો છો તેને React.Profiler કમ્પોનન્ટથી વીંટાળો. પ્રોફાઇલરને ઓળખવા માટે id પ્રોપ અને onRender પ્રોપ પ્રદાન કરો, જે એક કોલબેક ફંક્શન છે જે દરેક રેન્ડર પછી કોલ કરવામાં આવશે.

import React from 'react';

function MyComponent() {
  return (
    
      {/* Component content */}
    
  );
}

function onRenderCallback(
  id: string,
  phase: 'mount' | 'update',
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number,
  interactions: Set
) {
  console.log(`Component ${id} rendered`);
  console.log(`Phase: ${phase}`);
  console.log(`Actual duration: ${actualDuration}ms`);
  console.log(`Base duration: ${baseDuration}ms`);
}

onRender કોલબેક ફંક્શનને ઘણા આર્ગ્યુમેન્ટ્સ મળે છે જે રેન્ડરિંગ પ્રક્રિયા વિશે માહિતી પૂરી પાડે છે:

• id: React.Profiler કમ્પોનન્ટનો id પ્રોપ.
• phase: સૂચવે છે કે કમ્પોનન્ટ હમણાં જ માઉન્ટ થયું કે અપડેટ થયું.
• actualDuration: આ અપડેટમાં કમ્પોનન્ટને રેન્ડર કરવામાં વિતાવેલો સમય.
• baseDuration: મેમોઇઝેશન વિના કમ્પોનન્ટ ટ્રીને રેન્ડર કરવાનો અંદાજિત સમય.
• startTime: જ્યારે રિએક્ટે આ અપડેટ રેન્ડર કરવાનું શરૂ કર્યું.
• commitTime: જ્યારે રિએક્ટે આ અપડેટ કમિટ કર્યું.
• interactions: "ઇન્ટરેક્શન્સ" નો સેટ જે આ અપડેટ શેડ્યૂલ થયું ત્યારે ટ્રેસ કરવામાં આવી રહ્યું હતું.

તમે આ ડેટાનો ઉપયોગ તમારા કમ્પોનન્ટ્સના રેન્ડરિંગ પ્રદર્શનને ટ્રેક કરવા અને જ્યાં ઓપ્ટિમાઇઝેશનની જરૂર છે તે ક્ષેત્રોને ઓળખવા માટે કરી શકો છો.

પ્રોફાઇલિંગ ડેટાનું વિશ્લેષણ

એકવાર તમે ઉપર જણાવેલા સાધનોમાંથી કોઈ એકનો ઉપયોગ કરીને પ્રોફાઇલિંગ ડેટા કેપ્ચર કરી લો, પછીનું પગલું ડેટાનું વિશ્લેષણ કરવું અને પ્રદર્શનની સમસ્યાઓ ઓળખવાનું છે. અહીં કેટલાક મુખ્ય ક્ષેત્રો છે જેના પર ધ્યાન કેન્દ્રિત કરવું:

૧. ધીમા રેન્ડરિંગ કમ્પોનન્ટ્સને ઓળખવા

રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલરમાં ફ્લેમગ્રાફ અને રેન્ક્ડ દ્રશ્યો ખાસ કરીને તે કમ્પોનન્ટ્સને ઓળખવા માટે ઉપયોગી છે જે રેન્ડર થવામાં લાંબો સમય લે છે. ફ્લેમગ્રાફમાં પહોળા બારવાળા કમ્પોનન્ટ્સ અથવા રેન્ક્ડ યાદીમાં ટોચ પર દેખાતા કમ્પોનન્ટ્સ શોધો. આ કમ્પોનન્ટ્સ ઓપ્ટિમાઇઝેશન માટે સંભવિત ઉમેદવારો છે.

ક્રોમ ડેવટૂલ્સ પર્ફોર્મન્સ ટેબમાં, "Update" એન્ટ્રીઝ શોધો જે નોંધપાત્ર સમય લે છે. આ એન્ટ્રીઝ કમ્પોનન્ટ અપડેટ્સનું પ્રતિનિધિત્વ કરે છે, અને આ એન્ટ્રીઝમાં વિતાવેલો સમય સંબંધિત કમ્પોનન્ટ્સના રેન્ડરિંગ ખર્ચને સૂચવે છે.

૨. બિનજરૂરી રી-રેન્ડર્સને શોધી કાઢવા

બિનજરૂરી રી-રેન્ડર્સ પ્રદર્શન પર નોંધપાત્ર અસર કરી શકે છે, ખાસ કરીને જટિલ એપ્લિકેશન્સમાં. રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલર તમને તે કમ્પોનન્ટ્સને ઓળખવામાં મદદ કરી શકે છે જે તેમના પ્રોપ્સ અથવા સ્ટેટ બદલાયા ન હોવા છતાં પણ રી-રેન્ડર થઈ રહ્યા છે.

રિએક્ટ ડેવટૂલ્સ સેટિંગ્સમાં "Highlight updates when components render" વિકલ્પ સક્ષમ કરો. આ રી-રેન્ડર થઈ રહેલા કમ્પોનન્ટ્સને દૃષ્ટિની રીતે હાઇલાઇટ કરશે, જેનાથી બિનજરૂરી રી-રેન્ડર્સને શોધવાનું સરળ બનશે. આ કમ્પોનન્ટ્સ શા માટે રી-રેન્ડર થઈ રહ્યા છે તેના કારણોની તપાસ કરો અને તેમને રોકવા માટે React.memo અથવા useMemo જેવી તકનીકોનો અમલ કરો.

૩. ખર્ચાળ ગણતરીઓની તપાસ

તમારા કમ્પોનન્ટ્સની અંદર લાંબા સમય સુધી ચાલતી ગણતરીઓ મુખ્ય થ્રેડને બ્લોક કરી શકે છે અને પ્રદર્શન સમસ્યાઓનું કારણ બની શકે છે. ક્રોમ ડેવટૂલ્સ પર્ફોર્મન્સ ટેબ આ ગણતરીઓને ઓળખવા માટેનું એક મૂલ્યવાન સાધન છે.

ફ્લેમ ચાર્ટ અથવા બોટમ-અપ દ્રશ્યોમાં નોંધપાત્ર સમય લેતા જાવાસ્ક્રિપ્ટ ફંક્શન્સ શોધો. આ ફંક્શન્સ જટિલ ગણતરીઓ, ડેટા ટ્રાન્સફોર્મેશન અથવા અન્ય ખર્ચાળ કામગીરીઓ કરી શકે છે. મેમોઇઝેશન, કેશિંગ અથવા વધુ કાર્યક્ષમ એલ્ગોરિધમ્સનો ઉપયોગ કરીને આ ફંક્શન્સને ઓપ્ટિમાઇઝ કરવાનું વિચારો.

૪. નેટવર્ક રિક્વેસ્ટ્સનું વિશ્લેષણ

નેટવર્ક વિનંતીઓ પણ પ્રદર્શનની સમસ્યાઓમાં ફાળો આપી શકે છે, ખાસ કરીને જો તે ધીમી અથવા વારંવાર હોય. ક્રોમ ડેવટૂલ્સ નેટવર્ક ટેબ તમારી એપ્લિકેશનની નેટવર્ક પ્રવૃત્તિ વિશેની માહિતી પૂરી પાડે છે.

પૂર્ણ થવામાં લાંબો સમય લેતી વિનંતીઓ અથવા વારંવાર કરવામાં આવતી વિનંતીઓ શોધો. કેશિંગ, પેજીનેશન અથવા વધુ કાર્યક્ષમ ડેટા ફેચિંગ વ્યૂહરચનાઓનો ઉપયોગ કરીને આ વિનંતીઓને ઓપ્ટિમાઇઝ કરવાનું વિચારો.

૫. શેડ્યૂલર ઇન્ટરેક્શન્સને સમજવું

રિએક્ટ શેડ્યૂલર કેવી રીતે કાર્યોને પ્રાથમિકતા આપે છે અને એક્ઝેક્યુટ કરે છે તેની ઊંડી સમજ મેળવવી પ્રદર્શનને ઓપ્ટિમાઇઝ કરવા માટે અમૂલ્ય હોઈ શકે છે. જ્યારે ક્રોમ ડેવટૂલ્સ પર્ફોર્મન્સ ટેબ અને રિએક્ટ ડેવટૂલ્સ પ્રોફાઇલર શેડ્યૂલરની કામગીરીમાં થોડી દૃશ્યતા પ્રદાન કરે છે, ત્યારે કેપ્ચર કરેલા ડેટાનું વિશ્લેષણ કરવા માટે રિએક્ટની આંતરિક કામગીરીની વધુ ઝીણવટભરી સમજની જરૂર છે.

કમ્પોનન્ટ્સ અને શેડ્યૂલર વચ્ચેની ક્રિયાપ્રતિક્રિયાઓ પર ધ્યાન કેન્દ્રિત કરો. જો અમુક કમ્પોનન્ટ્સ સતત ઉચ્ચ-પ્રાથમિકતાવાળા અપડેટ્સને ટ્રિગર કરે છે, તો વિશ્લેષણ કરો કે આ અપડેટ્સ શા માટે જરૂરી છે અને શું તેમને મુલતવી રાખી શકાય છે અથવા ઓપ્ટિમાઇઝ કરી શકાય છે. શેડ્યૂલર કેવી રીતે રેન્ડરિંગ, લેઆઉટ અને પેઇન્ટિંગ જેવા વિવિધ પ્રકારના કાર્યોને એકબીજા સાથે જોડે છે તેના પર ધ્યાન આપો. જો શેડ્યૂલર સતત કાર્યો વચ્ચે સ્વિચ કરી રહ્યું હોય, તો તે સૂચવી શકે છે કે એપ્લિકેશન થ્રેશિંગનો અનુભવ કરી રહી છે, જે પ્રદર્શનમાં ઘટાડો તરફ દોરી શકે છે.

ઓપ્ટિમાઇઝેશન તકનીકો

એકવાર તમે પ્રોફાઇલિંગ દ્વારા પ્રદર્શનની સમસ્યાઓ ઓળખી લો, પછીનું પગલું તમારી એપ્લિકેશનના પ્રદર્શનને સુધારવા માટે ઓપ્ટિમાઇઝેશન તકનીકોનો અમલ કરવાનું છે. અહીં કેટલીક સામાન્ય ઓપ્ટિમાઇઝેશન વ્યૂહરચનાઓ છે:

૧. મેમોઇઝેશન (Memoization)

મેમોઇઝેશન એ ખર્ચાળ ફંક્શન કોલ્સના પરિણામોને કેશ કરવાની અને જ્યારે સમાન ઇનપુટ્સ ફરીથી આવે ત્યારે કેશ થયેલ પરિણામ પરત કરવાની એક તકનીક છે. રિએક્ટમાં, તમે ફંક્શનલ કમ્પોનન્ટ્સને મેમોઇઝ કરવા માટે React.memo અને ગણતરીઓના પરિણામોને મેમોઇઝ કરવા માટે useMemo હૂકનો ઉપયોગ કરી શકો છો.

import React, { useMemo } from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // ... component logic
});

function MyComponentWithMemoizedValue() {
  const expensiveValue = useMemo(() => {
    // ... expensive computation
    return result;
  }, [dependencies]);

  return (
    

      {expensiveValue}
    
  );
}

૨. વર્ચ્યુઅલાઇઝેશન (Virtualization)

વર્ચ્યુઅલાઇઝેશન એ મોટી યાદીઓ અથવા કોષ્ટકોને કાર્યક્ષમ રીતે રેન્ડર કરવાની એક તકનીક છે, જેમાં ફક્ત દૃશ્યમાન આઇટમ્સને જ રેન્ડર કરવામાં આવે છે. react-window અને react-virtualized જેવી લાઇબ્રેરીઓ રિએક્ટ એપ્લિકેશન્સમાં યાદીઓ અને કોષ્ટકોને વર્ચ્યુઅલાઈઝ કરવા માટે કમ્પોનન્ટ્સ પ્રદાન કરે છે.

૩. કોડ સ્પ્લિટિંગ (Code Splitting)

કોડ સ્પ્લિટિંગ એ તમારી એપ્લિકેશનને નાના ટુકડાઓમાં વિભાજીત કરવાની અને તેમને માંગ પર લોડ કરવાની એક તકનીક છે. આ તમારી એપ્લિકેશનનો પ્રારંભિક લોડ સમય ઘટાડી શકે છે અને તેના એકંદર પ્રદર્શનને સુધારી શકે છે. રિએક્ટ ડાયનેમિક ઇમ્પોર્ટ્સ અને React.lazy અને Suspense કમ્પોનન્ટ્સનો ઉપયોગ કરીને કોડ સ્પ્લિટિંગને સપોર્ટ કરે છે.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    Loading...